<!DOCTYPE html>
<html>
  <head>
    <title>Jcrop Example</title>
     <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../dist/jcrop.css" />

  <body>

  <div style="padding:0 5%;">
    <h1 style="font-family:Helvetica,sans-serif;">
      Jcrop Example <span style="color:lightgray;">- draw some crops!</span>
    </h1>

    <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">

    <ul class="coords">
      <li>X: <input type="text" id="x" readonly="readonly"></li>
      <li>Y: <input type="text" id="y" readonly="readonly"></li>
      <li>W: <input type="text" id="w" readonly="readonly"></li>
      <li>H: <input type="text" id="h" readonly="readonly"></li>
      <li>A: <input type="text" id="a" readonly="readonly"></li>
      <li><button>x2/y2</button>
    </li>
    </ul>

    <div id="compile">

    </div>

    <div>
      <button onclick="addImageWidget()">添加图片图片</button>
      <button onclick="addRotateWidget()">添加旋转窗口</button>
      <button onclick="addWidget()">添加普通窗口</button>
      <button onclick="saveImage()">保 存</button>
    </div>

  </div>

  <script src="../dist/jcrop.js"></script>
  <script>

    var jcp,r;
    Jcrop.load('target').then(img => {
      jcp = Jcrop.attach(img,{
        multi:false,
        shade: false,
        aspectRatio: 1,
      });
    });


    function addImageWidget(){
      const rect = Jcrop.Rect.sizeOf(jcp.el);
      const r = rect.size(100,100).center(rect.w,rect.h)
      const  widget = jcp.newRotateWidget(r, {
        aspectRatio:1,
        cover: 'https://d3o1694hluedf9.cloudfront.net/img/js.svg',
      });
      widget.el.addEventListener('crop.change',function(e){
        let pos = e.cropTarget.pos;
        document.querySelector('#x').value = pos.x;
        document.querySelector('#y').value = pos.y;
        document.querySelector('#w').value = pos.w;
        document.querySelector('#h').value = pos.h;
        document.querySelector('#a').value = e.cropTarget.angle;
      })

      widget.el.addEventListener('crop.remove',function(e){
        document.querySelector('#x').value = 0;
        document.querySelector('#y').value = 0;
        document.querySelector('#w').value = 0;
        document.querySelector('#h').value = 0;
        document.querySelector('#a').value = 0;
      })
      jcp.focus();
    }

    function addRotateWidget(){
      const rect = Jcrop.Rect.sizeOf(jcp.el);
      const r = rect.size(100,100).center(rect.w,rect.h)
      const  widget = jcp.newRotateWidget(r, {
        aspectRatio:1,
      });
      jcp.focus();
    }

    function addWidget(){
      const rect = Jcrop.Rect.sizeOf(jcp.el);
      const r = rect.size(100,100).center(rect.w,rect.h)
      const  widget = jcp.newWidget(r, {
        aspectRatio:1,
      });
      jcp.focus();
    }

    function saveImage(){
     const  ret = jcp.save();
     document.querySelector('#compile').append(ret.el)
    }

    function setImage(tag){
      document.getElementById('target').src =
              'https://d3o1694hluedf9.cloudfront.net/'+tag;
    }

    function rcoord() {
      const w = jcp.el.offsetWidth;
      const h = jcp.el.offsetHeight;
      return [Math.round(Math.random()*w), Math.round(Math.random()*h)];
    }

    function rrect() {
      return Jcrop.Rect.fromCoords(rcoord(),rcoord());
    }

    function anim(){
      if (!jcp.active) return false;
      const animtype = document.getElementById('animtype').value;
      jcp.active.animate(rrect(),null,animtype);
      jcp.focus();
    }
  </script>
  </body>
</html>
</head>
